<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html;charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>头像上传</title>
  <!-- Tell the browser to be responsive to screen width -->
  <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <link rel="stylesheet" th:href="@{/plugins/cropbox/css/style.css}"/>
  <!-- jQuery 2.2.3 -->
  <script th:src="@{/plugins/jQuery/jquery-2.2.3.min.js}"></script>
   <script th:src="@{/plugins/jQuery/jquery.cookie.js}"></script>
  <script th:src="@{/plugins/cropbox/js/cropbox.js}"></script>
  <!-- LayUI -->
<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}"/>
<script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>
  </head>
<body>
<div class="container">
  <div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none"></div>
  </div>
  <div class="action"> 
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">请先选择图片...</label>
      </a>
      <input type="file" class="" name="upload-file" id="upload-file" />
    </div>
    <input type="button" onclick="save()"  class="Btnsty_peyton" value="保存" />
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  />
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
  </div>
  <div class="cropped"></div>
</div>
<script type="text/javascript">
var layer=null;
$(window).load(function() {
	//$('#btnCrop').click();$("#idName").css("cssText","background-color:red!important");
	
	//$(".imageBox").css("cssText","background-position:88px 88px!important");$(".imageBox").css("cssText","background-size:222px 222px!important");
	layui.use('layer', function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
});
	var options =
	{
		thumbBox: '.thumbBox',
		spinner: '.spinner',
		imgSrc: ''
	}
	var cropper = $('.imageBox').cropbox(options);
	var img="";
	$('#upload-file').on('change', function(){
		var reader = new FileReader();
		reader.onload = function(e) {
			options.imgSrc = e.target.result;
			cropper = $('.imageBox').cropbox(options);
			getImg();
		}
		reader.readAsDataURL(this.files[0]);
		this.files = [];
		//getImg();
	})
	$('#btnCrop').on('click', function(){
		alert("图片上传喽");
	})
	function getImg(){
		img = cropper.getDataURL();
		$('.cropped').html('');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;" /><p>180px*180px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;" /><p>128px*128px</p>');
		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" /><p>64px*64px</p>');
		}
		
	$(".imageBox").on("mouseup",function(){
 		getImg();
  		});
		
		
	$('#btnZoomIn').on('click', function(){
		cropper.zoomIn();
	})
	$('#btnZoomOut').on('click', function(){
		cropper.zoomOut();
	})
	$(".upload-img").css("background-color",$.cookie("cropSkin"));
	$(".Btnsty_peyton").css("background-color",$.cookie("cropSkin"));
});
function save(){
	layer.alert("开发中", {
  	  title:"通知",
  	  closeBtn: 0
  	  });
}
</script>
</body>
</html>